import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:get/get.dart';
import 'package:xiaomi_shop/app/modules/user/controllers/user_controller.dart';
import 'package:xiaomi_shop/app/services/screenAdapter.dart';
import 'package:xiaomi_shop/app/services/xhttp.dart';
import 'package:xiaomi_shop/app/widget/logoWidget.dart';
import 'package:xiaomi_shop/models/messageModel.dart';

import '../controllers/phone_account_login_controller.dart';

class PhoneAccountLoginView extends GetView<PhoneAccountLoginController> {
  const PhoneAccountLoginView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          actions: [
            TextButton(
                onPressed: () {},
                child: const Text(
                  "帮助",
                  style: TextStyle(color: Colors.black),
                ))
          ],
        ),
        body: ListView(
          padding: EdgeInsets.all(ScreenAdapter.width(40)),
          children: [
            LogoWidget(),
            SizedBox(
              height: ScreenAdapter.height(80),
            ),
            // 手机号
            Container(
              margin: EdgeInsets.all(ScreenAdapter.width(40)),
              padding: EdgeInsets.all(ScreenAdapter.width(40)),
              height: ScreenAdapter.height(180),
              decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  borderRadius: BorderRadius.circular(10)),
              child: TextField(
                controller: controller.phoneEditController,
                keyboardType: TextInputType.phone,
                textInputAction: TextInputAction.done,
                textAlignVertical: TextAlignVertical.center,
                maxLength: 11,
                style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(50),
                    fontWeight: FontWeight.bold),
                decoration: InputDecoration(
                  counterText: "",
                  hintText: "请输入手机号",
                  hintStyle: TextStyle(
                      fontSize: ScreenAdapter.fontSize(50),
                      fontWeight: FontWeight.normal),
                  border: OutlineInputBorder(borderSide: BorderSide.none),
                  // 可解决 TextField 文字不居中问题
                  contentPadding: EdgeInsets.symmetric(horizontal: 14.w),
                ),
              ),
            ),
            // 密码
            Container(
              margin: EdgeInsets.fromLTRB(ScreenAdapter.width(40), 0,
                  ScreenAdapter.width(40), ScreenAdapter.width(40)),
              padding: EdgeInsets.all(ScreenAdapter.width(40)),
              height: ScreenAdapter.height(180),
              decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  borderRadius: BorderRadius.circular(10)),
              child: TextField(
                controller: controller.passwordEditController,
                textInputAction: TextInputAction.done,
                textAlignVertical: TextAlignVertical.center,
                style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(50),
                    fontWeight: FontWeight.bold),
                obscureText: true,
                decoration: InputDecoration(
                  hintText: "请输入密码",
                  hintStyle: TextStyle(
                      fontSize: ScreenAdapter.fontSize(50),
                      fontWeight: FontWeight.normal),
                  border: OutlineInputBorder(borderSide: BorderSide.none),
                  // 可解决 TextField 文字不居中问题
                  contentPadding: EdgeInsets.symmetric(horizontal: 14.w),
                ),
              ),
            ),

            // 隐私政策
            Container(
              padding: EdgeInsets.all(ScreenAdapter.width(30)),
              alignment: Alignment.center,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Obx(() => Checkbox(
                      shape: const CircleBorder(
                          side: BorderSide(color: Colors.black12)),
                      activeColor: Colors.red,
                      value: controller.agreePrivacy.value,
                      onChanged: (selected) {
                        controller.agreePrivacy.value =
                            !controller.agreePrivacy.value;
                      })),
                  Expanded(
                      child: RichText(
                    maxLines: 2,
                    text: TextSpan(
                        text: "已阅读并同意",
                        style: TextStyle(color: Colors.black54),
                        children: [
                          TextSpan(
                              text: "《小米商城用户协议》",
                              style: TextStyle(color: Colors.blue.shade900),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  print("《小米商城用户协议》");
                                }),
                          TextSpan(
                              text: "《小米商城隐私政策》",
                              style: TextStyle(color: Colors.blue.shade900),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  print("《小米商城隐私政策》");
                                })
                        ]),
                  )),
                ],
              ),
            ),
            // 登录
            Container(
              margin: EdgeInsets.only(
                  top: ScreenAdapter.height(20),
                  left: ScreenAdapter.height(80),
                  right: ScreenAdapter.height(80)),
              height: ScreenAdapter.height(136),
              child: ElevatedButton(
                  style: ButtonStyle(
                      backgroundColor: MaterialStatePropertyAll(Colors.red),
                      foregroundColor: MaterialStatePropertyAll(Colors.white),
                      textStyle: MaterialStatePropertyAll(TextStyle(
                          fontSize: ScreenAdapter.fontSize(40),
                          fontWeight: FontWeight.bold))),
                  onPressed: () async {
                    if (controller.phoneEditController.text.isEmpty ||
                        controller.passwordEditController.text.isEmpty) {
                      Toast.show("账号密码不能为空");
                      return;
                    }
                    if (!controller.agreePrivacy.value) {
                      Toast.show("请阅读并同意服务条款");
                      return;
                    }
                    // 登录
                    MessageModel messageModel = await controller.login();
                    if (messageModel.success) {
                      Toast.show(messageModel.message);
                      // 更新用户信息
                      UserController userController =
                          Get.find<UserController>();
                      userController.getUserInfo();
                      Get.back();
                    } else {
                      Toast.show(messageModel.message);
                    }
                  },
                  child: const Text("登录")),
            ),
            // 其他操作
            Container(
              margin: EdgeInsets.only(top: ScreenAdapter.height(30)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  TextButton(
                      onPressed: () {
                        Get.offAndToNamed("/phone-sms-login-step1");
                      },
                      child: const Text(
                        "验证码登录",
                        style: TextStyle(color: Colors.black),
                      )),
                  Row(
                    children: [
                      TextButton(
                          onPressed: () {},
                          child: const Text(
                            "忘记密码",
                            style: TextStyle(color: Colors.black),
                          )),
                      TextButton(
                          onPressed: () {
                            if (!controller.agreePrivacy.value) {
                              Toast.show("请阅读并同意服务条款");
                              return;
                            }
                            // offAllNamed 移除之前所有的路由,无法返回
                            // offAndToNamed 表示跳到的下一个页面会替换上一个页面。
                            // offNamed
                            // offNamedUntil 返回到指定页面
                            Get.offAndToNamed("/register-step1");
                          },
                          child: const Text(
                            "注册",
                            style: TextStyle(color: Colors.black),
                          )),
                    ],
                  )
                ],
              ),
            )
          ],
        ));
  }
}
